<!DOCTYPE html>
<html>
<head>
    {% block head %}
        <title>
            {% block title %}
            {% endblock %}
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        {% block head_style %}
            <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
            <link rel="stylesheet" href="{{asset ('css/pim.css', 'frontend') }}"/>
        {% endblock %}
    {% endblock %}
    {{ external_javascript_dependencies() }}
</head>
<body class="{% block bodyClass %}{% endblock %}">
    <div id="page">
        {% if feature_is_enabled('segment_integration') %}
            <div id="cookie-consent"></div>
        {% endif %}
        <div id="top-page">
            {% block main %}
            <div class="AuthenticationWrapper">
                <div class="LeftWrapper">
                    <div class="FormWrapper">
                        {# We keep the "AknLogin-title" class for the compatibility with the following behat step: \Pim\Behat\Context\NavigationContext::iAmLoggedInThroughTheUi #}
                        <div class="Logo AknLogin-title">
                            {%- block brandLogo -%}
                                <img src="{{ '/bundles/pimui/images/illustrations/login/Logo.svg' }}"
                                     alt="{{ 'pim_login.logo_title'|trans|e }}"
                                     width="250" height="60" />
                            {%- endblock -%}
                        </div>
                        <div class="ContainerForm">
                            <div class="Messages">
                                {% block messages %}
                                    {% if app.session.flashbag.peekAll|length > 0 %}
                                        {% for type, messages in app.session.flashbag.all %}
                                            {% for message in messages %}
                                                <div class="Helper {{ type ? ' Helper--'~type : '' }}">
                                                    <span class="Icon"></span>
                                                    <span class="Text">{{ message|trans|raw }}</span>
                                                </div>
                                            {% endfor %}
                                        {% endfor %}
                                    {% endif %}
                                {% endblock %}
                            </div>
                            {% block content %}
                            {% endblock content %}
                        </div>
                    </div>
                    <a class="Footer" href="https://www.akeneo.com/" target="_blank">
                        <div class="Powered">
                            {{ 'pim_login.footer.powered'|trans }}
                            <img class="PoweredImage" src="{{'/bundles/pimui/images/logo_login.svg'}}" alt="{{ 'pim_login.footer.powered_image_title'|trans|e }}" />
                        </div>
                        <div class="BaseLine">Unlocking Growth Through Product Experiences</div>
                    </a>
                </div>
                <div class="RightWrapper">
                    <div class="IllustrationLogin"></div>
                </div>
            </div>

            {% endblock main %}
        </div>
    </div>
    {% block deferred_javascript %}
        <script type="text/javascript" nonce="{{ js_nonce() }}">
            const initPimLoginForm = function(fields, submit, form) {
              if (!Array.isArray(fields) || !submit || !form) {
                return;
              }

              const validate = function (fields) {
                return fields.reduce(function (isValid, field) {
                  return (isValid && field.value.length > 0);
                }, true);
              };

              const changeHandler = function () {
                if (validate(fields) ) {
                  submit.removeAttribute('disabled');
                  submit.classList.remove('AknButton--disabled');
                } else {
                  submit.setAttribute('disabled', 'true');
                  submit.classList.add('AknButton--disabled');
                }
              };

              fields.forEach(function (field) {
                field.addEventListener('input', changeHandler);
                field.dispatchEvent(new Event('input'));
              });

              form.addEventListener('submit', function() {
                return validate(fields);
              });
            }
        </script>
    {% endblock %}
</body>
</html>
